<template>
  <div
    class="note-card"
    :style="{ width: width, background: cardColor[card.color] }"
  >
    <!-- 上 -->
    <div class="top">
      <p class="time">{{ dateOne(card.moment) }}</p>
      <p class="label">{{ label[card.type][card.label] }}</p>
    </div>
    <!-- 中 -->
    <p class="message" @click="toDetail">
      {{ card.message }}
    </p>
    <!-- 下 -->
    <div class="footer">
      <div class="footer-left">
        <div class="love" @click="clickLike">
          <svg-icon
            icon="love"
            :class="{ islike: card.like[0].count > 0 }"
          ></svg-icon>
          <span>{{ card.like[0].count }}</span>
        </div>
        <div class="notes" v-show="card.comcount[0].count > 0">
          <svg-icon icon="notes"></svg-icon
          ><span>{{ card.comcount[0].count }}</span>
        </div>
      </div>
      <div class="name">{{ card.name }}</div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, toRef } from "vue";
import { label } from "@/utils/data";
import { dateOne } from "@/utils/tools";
import { cardColor } from "@/utils/data";
import { insertFeedbackAPi } from "@/api/index";
import { useStore } from "vuex";
const store = useStore();
const props = defineProps({
  width: {
    default: "100%",
  },

  note: {
    default: {},
  },
});

const emit = defineEmits(["toDetail"]);
const note = toRef(props, "note");
const user = store.state.user;

const card = computed(() => {
  return note.value;
});

// 点击喜欢
const clickLike = () => {
  if (card.value.islike[0].count == 0) {
    // 提交给后端处理
    let data = {
      wallId: card.value.id,
      userId: user.id,
      type: 0,
      moment: new Date(),
    };
    insertFeedbackAPi(data).then(() => {
      // 反馈完成
      card.value.like[0].count++;
      card.value.islike[0].count++;
    });
  }
};

// 显示详情
const toDetail = () => {
  emit("toDetail");
};
onMounted(() => {
  // console.log(note)
  // console.log(note.value)
  // console.log('card', card.value)
  // console.log(card.value._object)
});
</script>

<style lang="less" scoped>
.note-card {
  // width: 288px;
  height: 240px;
  // background: rgba(146, 230, 245, 0.30);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  // margin: 20px;
  padding: 10px 20px;
  box-sizing: border-box;
  // margin-left: 8px;
  // margin-bottom: 8px;

  .top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 26px;

    p {
      font-size: 12px;
      color: @gray-2;
    }
  }

  .message {
    // width: 248px;
    height: 140px;
    font-family: fa;
    font-size: 14px;
    color: @gray-0;
    cursor: pointer;
  }

  .footer {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 36px;
    font-size: 14px;
    color: @gray-2;

    .footer-left {
      display: flex;

      .svg-icon {
        color: @gray-2;
        padding-right: @padding-4;
      }

      .love {
        padding-right: @padding-8;

        .svg-icon {
          cursor: pointer;
          transition: @tr;

          &:hover {
            color: @like;
          }
        }

        .islike {
          color: @like;
        }
      }
    }

    .name {
      font-family: fa;
      font-size: 16px;
      color: @gray-0;
      font-weight: 500;
    }
  }
}
</style>
